"use client"
import React, { useState, useEffect, useRef } from "react"
import {BookOpen, CheckCircle, Heart, User} from "lucide-react";
import {Button} from "@/components/ui/button";
import useAppStore from "@/store/app.store";
import {Progress} from "@/components/ui/progress";
import {useRouter} from "next/navigation";

interface IUserInfo {
  projectInfo?: any
  isMobile?: boolean
  active: string,
  ref?: any
}

/* 用户资料 */
export const UserInfo = ({ projectInfo, isMobile, active, ref }: IUserInfo) => {
  const router = useRouter()
  const { activeTab, isVerticalLayout, setActiveTab, setIsVerticalLayout } = useAppStore((state) => state);

  const getPercentage = () => Math.floor((projectInfo.currentPage / projectInfo.totalPages) * 100)

  useEffect(() => {
    setActiveTab(active)
  }, [active]);

  return (
  <div className="py-4 md:py-6 px-4 md:px-6 border-b border-amber-brown/30" ref={ref}>
    <div className="mx-auto max-w-5xl">
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <div className="flex-none relative w-16 h-16 md:w-20 md:h-20 rounded-full bg-white/80 border-2 border-amber-brown/30 overflow-hidden shadow-ancient flex items-center justify-center">
            <User className="h-8 w-8 md:h-10 md:w-10 text-amber-brown/50" />
          </div>
          <div>
            <div className="flex items-center gap-x-2 flex-wrap">
              <h2 className="text-lg md:text-xl font-bold">张明</h2>
              <p className="text-sm md:text-base text-ancient-text/70">高级勘校员</p>
            </div>
            {Boolean(projectInfo) && (
              <div className="bg-ancient-card/90 px-2 flex items-center gap-x-2 gap-y-1 flex-wrap py-1 rounded mt-1">
                <h1 className="text-sm font-bold text-amber-brown">{projectInfo.name}</h1>
                <div className="text-sm text-ancient-text/70 border-l border-amber-brown/30 pl-3">
                  任务编号: {projectInfo.taskId}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Top-right avatar (visible when not scrolled) */}
        <div className="backdrop-blur-sm">
          <div className="bg-ancient-card/90">
            <Button
              variant="ghost"
              className={`flex items-center h-auto py-1 rounded-none ${
                activeTab === "精进"
                  ? "text-amber-brown bg-amber-brown/10"
                  : "text-ancient-text/70 hover:bg-amber-brown/5"
              }`}
              onClick={() => router.push('/')}
            >
              <BookOpen className="h-5 w-5"/>
              <span className="text-xs">精进</span>
            </Button>
            <Button
              variant="ghost"
              className={`flex items-center h-auto py-1 rounded-none ${
                activeTab === "随喜"
                  ? "text-amber-brown bg-amber-brown/10"
                  : "text-ancient-text/70 hover:bg-amber-brown/5"
              }`}
              onClick={() => router.push('/sells')}
            >
              <Heart className="h-5 w-5"/>
              <span className="text-xs">随喜</span>
            </Button>
            <Button
              variant="ghost"
              className={`flex items-center h-auto py-1 rounded-none ${
                activeTab === "我执"
                  ? "text-amber-brown bg-amber-brown/10"
                  : "text-ancient-text/70 hover:bg-amber-brown/5"
              }`}
              onClick={() => router.push('/my')}
            >
              <User className="h-5 w-5"/>
              <span className="text-xs">我执</span>
            </Button>
          </div>
          {/*{isMobile && (*/}
          {/*  <Button*/}
          {/*    variant="outline"*/}
          {/*    size="sm"*/}
          {/*    onClick={() => setIsVerticalLayout(!isVerticalLayout)}*/}
          {/*    className="bg-ancient-scroll/10 border-amber-brown/30 text-amber-brown hover:bg-amber-brown/10 text-xs mt-1"*/}
          {/*  >*/}
          {/*    {isVerticalLayout ? "水平布局" : "垂直布局"}*/}
          {/*  </Button>*/}
          {/*)}*/}
        </div>
      </div>
    </div>
  </div>
  )
}